<template>
  <el-color-picker v-model="theme" :predefine="predefineColors" />
</template>

<script lang="ts" setup>
// 1. 导入 useSettingStore
import { useSettingStore } from "@/stores/settings"
// 2. 使用 useSettingStore
const store = useSettingStore()
// 3. 获取 el-color-picker  初始值
const theme = ref(store.settings.theme)
// 4. el-color-picker 参数
const predefineColors = [
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#00ced1",
  "#1e90ff",
  "#c71585"
]
// 5. 监听 theme  变化
watch(theme, (newValue) => {
  store.changeSetting({ key: "theme", value: newValue })
})
</script>
